<template>
  <div class="oriderDetails">
    <!-- eslint-disable -->
    <div tag="div" replace :to="{path: `/address/addressList/${orderInfo.id}?fullPath=${encodeURIComponent(this.$route.fullPath)}`}" class="address oriderBox">
      <div class="position"></div>
      <div class="info">
        <div class="name-mobile">
          <span>{{addressData.consignee}}</span>
          <span>{{addressData.mobile}}</span>
        </div>
        <div class="address-info">
          <span>地址：{{addressData.detailedAddress}}</span>
        </div>
      </div>
      <div class="arrow">
        <i class="icon-arrow"></i>
      </div>
    </div>
    <div class="information">
      <p><span>商品原价</span><span>￥1000.00</span></p>
      <p><span>已付定金</span><span>￥100.00</span></p>
      <p><span>需付尾款</span><span style="color: #D11463">￥10.00</span></p>
      <p><span>运费</span><span>￥1.00</span></p>
    </div>
    <div class="footer">
      <div class="box">
        <div class="momey">
          <span>￥{{totalAmout}}</span>
          <span class="freight">待付款</span>
        </div>
        <button class="buy" @click="handlePayment">付款</button>
      </div>
    </div>
  </div>
</template>
<script>
import Ajax from "@/mixins/ajax";

export default {
  /* eslint-disable */
  name: "tailMoney",
  mixins: [Ajax],
  components: {},
  data() {
    return {
      // 支付方式-----支付宝: 1
      payType: 1,
      // 订单详情信息
      orderInfo: {},
      // 总金额
      totalAmout: 0,
      alipayHtml: "",
      isPopup_payment: true,
      // 默认收货地址
      addressData: {},
      // 创建订单参数
      params: {}
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
    });
  },
  mounted() {
    // 支付成功判断
    const { totalAmout } = this.$route.query;
    if (totalAmout) {
      this.isPopup_payment = true;
    }
  },
  methods: {
    handlePayment() {

    },
    handleSelectPay(type) {
      this.payType = type;
    }
  }
};
</script>
<style scoped>
.oriderDetails {
  width: auto;
  position: absolute;
  top: 1.51rem;
  right: 0;
  bottom: 0;
  left: 0;
  background: #f5f5f4;
}
.oriderBox {
  background: #fff;
  margin-bottom: 0.45rem;
  position: relative;
}
.address {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  align-items: center;
  padding: 0.45rem 0.48rem 0.46rem 0.58rem;
}
.address .position {
  width: 0.51rem;
  height: 0.7rem;
  background: url("../../assets/img/position.png") no-repeat;
  background-size: 100%;
  margin-right: 0.41rem;
}
.address .info {
  -webkit-flex-grow: 1;
  flex-grow: 1;
}
.address .info .name-mobile {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-bottom: 0.54rem;
  font-size: 0.48rem;
}
.address .info .address-info {
  font-size: 0.42rem;
  color: #8e8e8e;
}
.address .arrow {
  margin-left: 0.37rem;
}
.address .arrow .icon-arrow {
  display: inline-block;
  width: 0.24rem;
  height: 0.43rem;
  background: url("../../assets/img/arrow.png") no-repeat;
  background-size: 100%;
}
.payment .title {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  height: 1.32rem;
  padding: 0 0.49rem;
  font-size: 0.48rem;
  border-bottom: 0.01rem solid #e1e1e1;
}
.payment .title .icon-payment {
  width: 0.69rem;
  height: 0.6rem;
  background: url("../../assets/img/payment.png") no-repeat;
  background-size: 100%;
  margin-right: 0.34rem;
}
.pay-item {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  padding: 0.45rem 0.49rem 0.45rem 1.54rem;
  border-bottom: 0.01rem solid #ccc;
}
.pay-item .apliy {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
}
.pay-item .apliy .icon-apliy {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  background: url("../../assets/img/apliy.png") no-repeat;
  background-size: 100%;
  margin-right: 0.29rem;
}
.pay-item .checkbox {
  width: 0.54rem;
  height: 0.54rem;
  background-repeat: no-repeat;
  background-size: 100%;
}
.pay-item .checked {
  background-image: url("../../assets/img/checked.png");
}
.pay-item .check {
  background-image: url("../../assets/img/check.png");
}
.goods-info {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  align-items: center;
  padding: 0.45rem 0.48rem;
  margin-bottom: 0;
  border-bottom: 1px solid #ccc;
}
.goods-info .title {
  max-width: 6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: -1rem;
}
.goods-info .pic {
  width: 1.8rem;
  height: 1.8rem;
  overflow: hidden;
  margin-right: 0.28rem;
  background-color: #d0d0d0;
}
.goods-info .pic .picItem {
  width: 1.8rem;
  height: 1.8rem;
}
.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
}
.footer .box {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  height: 1rem;
  background: #fff;
  padding: 0.25rem 0.48rem;
  box-shadow: 0rem -0.01rem 0rem 0rem #c8c7cc;
}
.footer .box .momey {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-align-content: space-between;
  align-content: space-between;
  font-size: 0.63rem;
  color: #d11463;
}
.footer .box .momey .freight {
  font-size: 0.36rem;
}
.footer .box .buy {
  width: 2.76rem;
  height: 1.14rem;
  background-color: #d11463;
  border-radius: 0.12rem;
  font-size: 0.54rem;
  color: #fff;
  border-radius: 0.1rem;
}

.cancel-info {
  margin-top: 0.62rem;
  font-size: 0.42rem;
  text-align: left;
}
.info-center {
  text-align: center;
}
.pop-footer-btns .pop-footer-close {
  width: 5.01rem;
  height: 1.08rem;
  background-color: #d11463;
  border-radius: 2rem;
  color: #fff;
  font-size: 0.54rem;
}
.jiage {
  position: absolute;
  left: 2.5rem;
  top: 1.7rem;
}
.number {
  position: absolute;
  right: 0.5rem;
  top: 1.7rem;
}
.information {
  background: #fff;
  padding-bottom: 1.2rem;
  padding-left: 0.48rem;
  padding-right: 0.48rem;
}
.information p {
  clear: both;
  margin-top: 0.6rem;
  line-height: 1rem;
}
.information p span:nth-child(1) {
  float: left;
}
.information p span:nth-child(2) {
  float: right;
}
.myNumber {
  background: #fff;
  padding: 0.56rem 0.5rem;
  margin-top: 0.42rem;
}
.myNumber span {
  margin-left: 3.5rem;
}
.Agreement {
  height: 1.09rem;
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 1.5rem;
  border-top: 1px solid #ccc;
  padding: 0.38rem 0.45rem;
}
.icon {
  width: 0.5rem;
  height: 0.5rem;
  background: url("../../assets/img/nogou.png") 0/100% 100%;
  float: left;
  margin-bottom: 1rem;
  margin-right: 0.2rem;
  position: absolute;
  top: 0.5rem;
}
.yesIcon {
  background: url("../../assets/img/yesIcon.png") 0/100% 100%;
}
.text {
  padding-left: 0.68rem;
}
.text p span {
  text-decoration: underline;
}
</style>

